<template>
  <div class="experimentList">
    <div class="table">
      <div class="head" style="margin-top:-10px">
        <span class="title">关联实验</span>
        <!--el-button
          v-if="userInfo.roleName == 'schoolAdmin'"
          icon="el-icon-sort"
          class="sortBtn"
          size="medium"
          type="primary"
          round
          @click="sort()"
          >调整顺序</el-button
        >
        <el-button
          v-if="userInfo.roleName == 'schoolAdmin'"
          icon="el-icon-link"
          class="getBtn"
          size="medium"
          type="primary"
          round
          @click="link()"
          >关联实验</el-button
        -->
        <el-button icon="el-icon-refresh" class="refreshBtn" size="small" type="primary" round
          v-debounce="getTableData">刷新</el-button>
      </div>
      <div class="content">
        <el-table v-loading="listLoading" :data="dialogTableData" border fit highlight-current-row width="100%">
          <el-table-column prop="id" label="实验Id" width="90px" />
          <el-table-column prop="name" align="center" label="实验名称" width="500px" />
          <el-table-column prop="creator" align="center" label="创建人" width="150px" />
          <el-table-column prop="creatorSchool" align="center" label="创建学校" width="150px" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
            <el-popover placement="top" width="380" trigger="click" >
            <p>{{row.note}}</p>
                  <el-button slot="reference" size="medium" type="primary" icon="el-icon-notebook-2" class="btn_primary"
                    >备注</el-button
                  >
                </el-popover>
              <el-button class="btn_primary" size="medium" icon="el-icon-view" @click="showExperiment(row)">预览</el-button>
              <el-button class="btn1" v-if="row.link" type="primary" size="small" round :loading="row.linkLoading"
                @click="linkExperiment(row)">添加实验到本校</el-button>
              <el-button v-else type="info" size="small" disabled="" round>已添加</el-button>

              <!--el-popconfirm icon="el-icon-info" icon-color="red" title="确定取消关联这个实验吗？"
                @confirm="() => delExperiment(row)">
                <el-button size="medium" slot="reference" type="danger" icon="el-icon-delete" :loading="row.delLoading"
                  class="btn_danger">取消关联</el-button>
              </el-popconfirm-->
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-show="total > pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top:20px">
        </el-pagination>
        <el-dialog title="预览" :visible.sync="dialogVisible" width="900px" class="connect">
          <div class="container">
            <h2>{{ experiment.name }}</h2>

            <div class="content">
              <div class="box">
                <div class="box_head">
                  <span>必做题</span>
                </div>
                <el-table v-loading="dialogLoading" :data="this.experiment.requiredQuestions" border fit stripe
                  highlight-current-row width="100%">
                  <template slot="empty">
                    <span>实验数据为空</span>
                  </template>
                  <el-table-column prop="title" align="center" label="题目" width="400px" />
                  <!--el-table-column
            prop="description"
            align="center"
            label="题目描述"
            width="300px"
          /-->
                  <el-table-column prop="level" align="center" label="难度" width="155px">
                    <template v-slot="{ row }">
                      {{ levelChange(row.level) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="tags" align="center" label="知识点" width="300px">
                    <template v-slot="{ row }">
                      <el-tag v-for="item in row.tags" :key="item.index">{{ item.name }}</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <div class="content">
              <div class="box">
                <div class="box_head">
                  <span>选做题</span>
                </div>
                <el-table v-loading="dialogLoading" :data="this.experiment.optionalQuestions" border fit stripe
                  highlight-current-row width="100%">
                  <template slot="empty">
                    <span>实验数据为空</span>
                  </template>
                  <el-table-column prop="title" align="center" label="题目" width="400px" />
                  <!--el-table-column
            prop="description"
            align="center"
            label="题目描述"
            width="300px"
          /-->
                  <el-table-column prop="level" align="center" label="难度" width="155px">
                    <template v-slot="{ row }">
                      {{ levelChange(row.level) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="tags" align="center" label="知识点" width="300">
                    <template v-slot="{ row }">
                      <el-tag v-for="item in row.tags" :key="item.index">{{ item.name }}</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
                <!--el-pagination v-show="total > pageSize" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]"
                  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                  style="margin-top:20px">
                </el-pagination-->


              </div>
            </div>
          </div>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
  import {
    findNotRelatedSchool,
    getExperimentBySchool,
    delExperiment,
    setExperimentStatus,
    setExperimentDateTime,
    getAllExperiment,
    linkExperiment,
    sortExperiment,
    getExperimentById
  } from "@/api/experiment.js";

  export default {
    name: "experiment",

    data() {
      return {
        dialogLoading: true,
        tableLoading: false, //实验列表加载
        editTimeLoading: false,
        listLoading: false, //关联实验列表加载
        dialogTableData: [], //关联实验列表
        userInfo: {},
        tableData: [],
        total: 0,
        isLink: false, //是否进行了关联
        first: true, //是否第一次进入
        pageSize: 10,
        currentPage: 1,
        dialogVisible: false,
        experiment: {}

      };
    },
    //获取用户信息并获取列表
    created() {
      this.userInfo = JSON.parse(localStorage.getItem("user"));
      this.getTableData();
    },
    computed: {
      levelChange() {
        let levels = ["easy", "medium", "hard", "insuperable", "hell"];
        return val => {
          return levels[val];
        };
      }
    },
    activated() {
      if (this.$route.params.mark == true) {
        this.getTableData();
      }
    },
    methods: {
      //取消关联实验
      delExperiment(row) {
        row.delLoading = true;
        let obj = {
          id: row.id,
          userId: this.userInfo.userId
        };
        if (!row.link) {
          delExperiment(obj)
            .then(res => {
              this.$message.success("成功取消关联");
              this.getTableData();
            }).finally(() => {
              row.delLoading = false;
              this.isLink = true;
            });
        } else {
          this.$message.error("该实验并未关联");
        }
      },
      //关联实验
      linkExperiment(row) {
        row.linkLoading = true;
        let obj = {
          experimentId: row.id,
          schoolId: this.userInfo.schoolId
        };
        linkExperiment(obj)
          .then(res => {
            this.$message.success("关联成功");
            row.link = false;
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => {
            row.linkLoading = false;
            this.isLink = true;
          });
      },
      //获取列表
      getTableData() {
        this.tableLoading = true;
        let obj = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          userId: this.userInfo.userId
        };
        this.listLoading = true;
        findNotRelatedSchool(obj)
          .then(res => {
            res.data.forEach(element => {
              element.link = true;
              element.linkLoading = false;
            });
            this.dialogTableData = res.data;
            console.log(res);
            this.total = res.total;
          })
          .finally(() => {
            this.listLoading = false;
            this.first = false;
            this.isLink = false;
          });

      },


      link() {
        this.dialogVisible = true;
        this.sortDialogVisible = false;
        if (this.isLink || this.first) {
          this.listLoading = true;
          findNotRelatedSchool({
              userId: this.userInfo.userId
            })
            .then(res => {
              res.data.forEach(element => {
                element.link = true;
                element.linkLoading = false;
              });

              this.dialogTableData = res.data;
              console.log(res);
              this.total = res.total;
            })
            .finally(() => {
              this.listLoading = false;
              this.first = false;
              this.isLink = false;
            });
        }
      },
      showExperiment(row) {
        this.dialogVisible = true;
        let experimentId = row.id;
        getExperimentById(experimentId).then((res) => {
          this.experiment = res.data;
        })
        this.dialogLoading = false;
        console.log(this.experiment);
      },
      //处理页面实验数变化
      handleSizeChange(size) {
        this.pageSize = size;
        this.getTableData();
      },
      //处理页面变化
      handleCurrentChange(page) {
        this.currentPage = page;
        this.getTableData();
      },

    }
  };
</script>
<style scoped>
  .title {
    font-size: 20px;
    color: #409eff;
    font-weight: bold;
  }

  .el-table {
    margin-top: 20px;
  }

  .head {
    position: relative;
  }

  .sortBtn {
    position: absolute;
    right: 250px;
  }

  .getBtn {
    position: absolute;
    right: 110px;
  }

  .refreshBtn {
    position: absolute;
    right: 10px;
  }

  .el-tag.el-tag--light.close {
    background-color: #fef0f0;
    border-color: #f56c6c;
    color: #f56c6c;
  }

  .el-tag.el-tag--light.open {
    border-color: #67c23a;
    background-color: #f0f9eb;
    color: #67c23a;
  }

  .box {
    white-space: pre-line;
    text-align: left;
    border: solid 2px rgba(240, 243, 250, 1);
    margin: 10px 0;
  }

  .box .box_head {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    color: #7c828e;
    background: #edf3ff;
    border-bottom: solid 1px rgba(240, 243, 250, 1);
  }

  .box .box_content {
    padding-left: 10px;
    overflow: auto;
  }
</style>
